<template>

    <div>

        <h2>话费套餐订单</h2>

        <div class="container">
            <div>
                <el-form :inline="true" :model="params" class="demo-form-inline">
                    <el-form-item label="搜索字段">
                        <el-select v-model="params.field_type" placeholder="搜索字段" size="mini">
                            <el-option label="用户ID" value="user_id"></el-option>
                            <el-option label="手机号" value="mobile"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="关键词">
                        <el-input v-model="params.keyword" placeholder="关键词" size="mini"></el-input>
                    </el-form-item>
                    <el-form-item label="充值类型">
                        <el-select v-model="params.type" placeholder="请选择类型" size="mini" style="width:100px">
                            <el-option key="all" value="all" label="全部"></el-option>
                            <el-option key="1" value="1" label="套餐"></el-option>
                            <el-option key="2" value="2" label="直充"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="应用系统">
                        <el-select v-model="params.platform" placeholder="请选择系统" size="mini" style="width:100px">
                            <el-option key="all" value="all" label="全部"></el-option>
                            <el-option key="android" value="android" label="安卓"></el-option>
                            <el-option key="ios" value="ios" label="苹果"></el-option>
                            <el-option key="wechart" value="wechart" label="微信"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="应用市场">
                        <el-select v-model="params.market" placeholder="请选择市场" size="mini" style="width:100px">
                            <el-option key="all" value="all" label="全部"></el-option>
                            <el-option v-if="params.platform=='ios'" key="appstore" value="appstore" label="苹果"></el-option>
                            <el-option key="office" value="office" label="官网"></el-option>
                            <el-option key="huawei" value="huawei" label="华为"></el-option>
                            <el-option key="xiaomi" value="xiaomi" label="小米"></el-option>
                            <el-option key="vivo" value="vivo" label="VIVO"></el-option>
                            <el-option key="oppo" value="oppo" label="OPPO"></el-option>
                            <el-option key="baidu" value="baidu" label="百度"></el-option>
                            <el-option key="360" value="360" label="360"></el-option>
                            <el-option key="yingyongbao" value="yingyongbao" label="应用宝"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="订单时间">
                        <el-date-picker
                                v-model="params.datetime"
                                type="daterange"
                                start-placeholder="开始日期"
                                end-placeholder="截止日期"
                                value-format="yyyy-MM-dd"
                                size="mini">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="reload" size="mini">查询</el-button>
                    </el-form-item>
                </el-form>
                <el-alert
                    title="查询结果:"
                    type="success"
                    :closable="false"><el-tag>订单数:{{total}}笔</el-tag><el-tag>充值金额:{{total_recharge_amount}}元</el-tag><el-tag>付款金额:{{total_pay_amount}}元</el-tag>
                 </el-alert>
            </div>
            <el-table
                    :data="items"
                    style="width: 100%"
                    v-loading="loading">
                <el-table-column
                        prop="id"
                        label="订单ID"
                >
                </el-table-column>
                <el-table-column
                        prop="recharge_amount"
                        label="充值金额"
                        >
                </el-table-column>
                <el-table-column
                        label="充值周期"
                        >
                        <template slot-scope="scope">
                        <p v-if="scope.row.type==2">直充</p>
                        <p v-if="scope.row.type==1">{{scope.row.months}}个月套餐</p>
                        </template>
                </el-table-column>
                <el-table-column
                        prop="pay_amount"
                        label="实付金额"
                        >
                </el-table-column>
                <el-table-column
                        prop="discount"
                        label="折扣"
                        >
                </el-table-column>
                <el-table-column
                        label="充值手机"
                        >
                    <template slot-scope="scope">
                        <el-button type="text" @click="call(scope.row.mobile_en, scope.row.mobile)">{{scope.row.mobile}}</el-button>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="user.open_code"
                        label="所属会员ID"
                        >
                </el-table-column>

                <el-table-column
                        prop="status_name"
                        label="状态"
                >
                </el-table-column>

                <el-table-column
                        prop="paid_at"
                        label="支付时间"
                >
                </el-table-column>
                <el-table-column
                        label="操作"
                >
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.type==1" @click="showTask(scope.row.id)" size="mini">充值详情</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination
                    ref="mainPage"
                    background
                    class="pagination"
                    layout="prev, pager, next"
                    :total="total"
                    :page-size="params.limit"
                    @current-change="setPage"
                    @prev-click="setPage"
                    @next-click="setPage"
            >
            </el-pagination>

        </div>

        <mobile-task ref="MobileTask"></mobile-task>

    </div>

</template>
<script>
    import MobileTask from './MobileTask.vue';
    export default {
      components: {
        MobileTask
      },
      data() {
        return {
          items: [],
          loading: true,
          params: {
            type: 'all',
            limit: 10,
            offset: 0,
            field_type: 'user_id',
            keyword: '',
            datetime: [],
            channel:'all',
            platform:'all',
            market:'all'
          },
          currentPage: 1,
          total: 0,
          total_recharge_amount:0,
          total_pay_amount:0
        }
      },
      created() {
        this.fetch();
      },
      methods: {
        fetch() {
          axios.get('/admin/api/mobile_recharge_order', {params: this.params}).then((res) => {
            if (res.data.code === 0) {
                this.items = res.data.data.items;
                this.total = res.data.data.total;
                this.total_recharge_amount = res.data.data.total_recharge_amount;
                this.total_pay_amount = res.data.data.total_pay_amount;
            } else {
              this.$message(res.data.msg);
            }
            this.loading = false;
          }).catch(function() {
            this.$message('系统错误');
            this.loading = false;
          })
        },

        disable() {

        },

        enable() {

        },

          call(mobileEn, mobile) {
              this.$confirm('是否拨打'+mobile, '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
              }).then(() => {
                  this.loading = true,
                      axios.post(
                          '/admin/api/call_mobile',
                          {mobile_en:mobileEn}
                      ).then((res) => {
                          if (res.data.code === 0) {
                              this.$message({
                                  type: 'success',
                                  message: '拨打成功!'
                              });
                          } else {
                              this.$message({
                                  type: 'error',
                                  message: res.data.msg
                              });
                          }
                          this.loading = false;
                      }).catch(function() {
                          this.$message('系统错误');
                          this.loading = false;
                      })
              }).catch(() => {
              });
          },

        // 切换分页
        setPage: function(page) {
          this.currentPage = page;
          this.params.offset = (page - 1) * this.params.limit;
          this.fetch()
        },
        // 重新请求接口获取数据，参数发生了变化，页码重置为1
        reload: function() {
          if (this.currentPage === 1) {
            this.fetch();
          } else {
            this.setPage(1);
          }
        },
        showTask(orderId) {
          this.$refs.MobileTask.show(orderId);
        }
      }
    }
</script>